<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="../vueJS/VUE.js"></script>
</head>

<body>
    <div id="root">
        <form @submit.prevent="demo">
            <label for="demo">账号:</label>
            <input type="text" id="demo" v-model.trim="account"><br><br>
            密码:<input type="password" v-model.number="pwd"><br><br>
            <!-- 加上.number说明收集的作为数字 -->
            性别： 男<input type="radio" name="sex" value="male" v-model="sex">
                女<input type="radio" name="sex" value="female" v-model="sex"><br><br>
            爱好：学习<input type="checkbox" name="hobby" v-model='hobby' value="study">
                吃饭<input type="checkbox" name="hobby" v-model='hobby' value="eat">
                睡觉<input type="checkbox" name="hobby" v-model='hobby' value="sleep"><br><br>
                <!-- 多组的勾选框v-model要绑定数组,对应的value会加到数组里面 ,如果不是数组，只对应布尔值，那就是选一个都选-->
            民族：<select v-model="people">
                <option value="hanzu">汉族</option>
                <option value="manzu">满族</option>
            </select><br><br><br>
            其他信息：<textarea v-model.lazy="other"></textarea><br><br><br><!--.lazy收集的慢  .trim去掉空格-->
            <input type='checkbox' v-model="agree">阅读接受<a href="../7.列表渲染/key的作用.txt">用户协议</a>
            <button>提交</button>
        </form>
    </div> 
    <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            account:'',
            pwd:'',
            sex:'',
            hobby:[],
            people:'',
            other:'',
            agree:''
        },
        methods: {
            demo(){
                console.log(JSON.stringify(this.pwd))//转成JSON字符串形式
            }
        }
    })
    </script>
</body>
</html>